<template>
  <div>
    <el-card class="box-card">
      <div style="display: flex; justify-content: flex-end">
        <div>
          <el-button @click="$router.go(-1)" type="primary">返回</el-button>
          <el-button type="danger" @click="handleRefresh">刷新</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-table :data="valList" border style="width: 100%; margin-top: 20px">
        <el-table-column
          v-for="(item, index) in headList"
          :label="item.title"
          :key="index"
          align="center"
        >
          <template slot-scope="scope">
            <!-- {{ scope.row[item.name] }} -->
            <!-- {{getLableName(item.name, scope.row[item.name])}} -->
            <span
              v-html="scope.row.htmlText"
              v-if="scope.row[item.name].includes('http')"
            ></span>
            <span v-else>{{ scope.row[item.name] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  data() {
    return {
      headList: [], //头部数据
      valList: [], //表格数据
    };
  },
  created() {},
  activated() {
    this.getDataList();
  },
  methods: {
    //获取详情数据
    getDataList() {
      let logId = this.$route.query.id;
      console.log("logId==", logId);
      // return
      this.$http({
        url: this.$http.adornUrl("/htmlTemp/htmlVarToTable"),
        method: "get",
        params: this.$http.adornParams({
          logId: logId,
        }),
      }).then((res) => {
        console.log(res, "res");
        if (res.data.code === 0) {
          this.headList = res.data.data.head;
          // this.valList = this.valList.push(res.data.data.head)
          this.valList = this.doData(res.data.data.val);
          console.log("this.headList==", this.headList);
          // console.log("this.valList==",this.valList);
        } else {
          this.headList = [];
          this.valList = [];
        }
      });
    },
    handleRefresh() {
      this.getDataList();
    },
    getLableName(name, data) {
      console.log(name, data);
      let l_name = data;
      if (name == "input4") {
        console.log("33333333333333333333333");
        // l_name = data === 1 ? "已下派" : "未下派";
        // <a  href="javascript:;" onclick="window.open('http://politics.people.com.cn/n1/2020/1030/c1001-31911623.html','newwindow','height=800,width=1500,top=100,left=200,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');">点击我</a>
        // let xxx = data.split(",")
        l_name = data;
      }
      return l_name;
    },
    doData(str) {
      console.log("00000000", str);
      for (let index = 0; index < str.length; index++) {
        const element = str[index];
        for (var key in element) {
          // console.log("key名称是：" + key + ",key的值是：" + element[key]);
          if (element[key].includes("http")) {
            // console.log("2222222222222222222222222222222");
            // console.log("222222222222", element[key]);
            let list = element[key].split(",");
            let strs = "";
            for (let i = 0; i < list.length; i++) {
              let ss = list[i];
              strs += `<a href="${ss}" target="_blank" style="color:#fff">${ss}<a/><br />`;
            }
            str[0].htmlText = strs;
            console.log("@@@@@@@@", str);
          }
        }
      }
      // let list = str[0].input4.split(",");
      // let strs = "";
      // for (let i = 0; i < list.length; i++) {
      //   let ss = list[i];
      //   strs += `<a href="${ss}" target="_blank">${ss}<a/><br />`;
      // }
      // str[0].htmlText = strs;
      // console.log("@@@@@@@@", str);
      return str;
    },
  },
};
</script>
<style scoped>
.green {
  color: green;
}

.red {
  color: red;
}

.des_con span {
  font-size: 18px;
  font-weight: 600;
}

.read {
  cursor: pointer;
  color: yellowgreen;
}

.table {
  width: 100%;
}

.table tr {
  line-height: 30px;
}

.table tr td {
  width: 50%;
}
</style>
  
  